<style scoped>
</style>

<template>
  <div>
    <Modal
      v-model="IsModalShow"
      :title="modalFormTitle"
      :mask-closable="false"
      @on-cancel="cancel"
      width="600"
    >
      <Form
        ref="modalForm"
        :model="modalForm"
        :label-width="80"
        value="true"
        style="padding: 3px 60px"
      >
        <Form-item
          label="用户名"
          prop="username"
          :rules="{required: true, message: '必填,1-10位字符',min:1,max:10, trigger:'blur',type:'string'}"
        >
          <Input v-model="modalForm.username"></Input>
        </Form-item>
        <Form-item
          label="真实姓名"
          prop="realname"
          :rules="{required: true, message: '必填,1-10位字符',min:1,max:10, trigger:'blur',type:'string'}"
        >
          <Input v-model="modalForm.realname"></Input>
        </Form-item>
        <Form-item
          v-if="modalFormTitle==='添加用户'"
          label="密码"
          prop="password"
          :rules="{required: true, message: '必填,6-16位数字或字母或-_', trigger:'blur',type:'string',pattern: /^[a-zA-Z0-9_-]{6,16}$/}"
        >
          <Input v-model="modalForm.password" type="password"></Input>
        </Form-item>
        <Form-item
          label="电话"
          prop="mobile"
          :rules="{required: true, message: '输入11位手机号', trigger:'blur',type:'string',pattern: /^1\d{10}$/}"
        >
          <Input v-model="modalForm.mobile"></Input>
        </Form-item>
        <Form-item
          label="角色"
          prop="roleId"
          :rules="{required: true, message: '必选', trigger:'change',type:'number'}"
        >
          <Select v-model="modalForm.roleId" placeholder="请选择" filterable>
            <Option
              v-for="item in roleSelectData"
              :value="item.value"
              :key="item.value"
            >{{ item.label }}</Option>
          </Select>
        </Form-item>
        <Form-item
          label="部门"
          prop="depCascader"
          :rules="{required: true, message: '必选', trigger:'change', type:'array'}"
        >
          <Cascader
            :data="deptCasc"
            v-model="modalForm.depCascader"
            :filterable="true"
            change-on-select
            transfer
            placeholder="选择部门"
          ></Cascader>
        </Form-item>
        <Form-item label="邮箱" prop="email">
          <Input v-model="modalForm.email"></Input>
        </Form-item>
        <Form-item
          label="推送模板"
          prop="configId"
          :rules="{required: true, message: '必选', trigger:'change', type:'number'}"
        >
          <Select v-model="modalForm.configId" placeholder="请选择" filterable>
            <Option
              v-for="item in configCombo"
              :value="item.value"
              :key="item.value"
            >{{ item.label }}</Option>
          </Select>
        </Form-item>
        <Form-item label="状态" prop="switchVal">
          <i-switch size="large" v-model="switchVal">
            <span slot="open">启用</span>
            <span slot="close">禁用</span>
          </i-switch>
        </Form-item>
      </Form>
      <div slot="footer">
        <Button type="default" @click="cancel">关闭</Button>
        <Button type="primary" :loading="modalForm_loading" @click="saveForm('modalForm')">保存</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import {
  getUserInfo,
  updateUser,
  getRoleSelect,
  getDeptCascader,
  saveUser,
  configCombo
} from "@/api/system";
export default {
  props: {
    parentForm: {
      type: Object,
      default: function() {
        return {};
      }
    },
    modalShow: {
      type: Boolean,
      default: true
    },
    modalFormTitle: {
      type: String,
      default: "添加用户"
    }
  },
  data() {
    return {
      IsModalShow: false,
      modalForm: {},
      modalForm_loading: false,
      deptCasc: [],
      roleSelectData: [],
      switchVal: true,
      configCombo: []
    };
  },
  watch: {
    modalShow(curVal, oldVal) {
      if (curVal) {
        this.getUserDetail();
      }
      this.IsModalShow = curVal;
    }
  },
  created() {
    this.getRoleSelectList();
    this.getDeptCascList();
    this.getConfigCombo();
  },
  mounted() {},
  methods: {
    async getRoleSelectList() {
      let res = await getRoleSelect();
      this.roleSelectData = res.data;
    },
    async getConfigCombo() {
      let res = await configCombo();
      if (res.code == 0) {
        console.log(res);
        this.configCombo = res.data;
      }
    },
    async getUserDetail() {
      if (this.modalFormTitle == "添加用户") {
        this.modalForm = {};
        return;
      }
      let res = await getUserInfo(this.parentForm.userId);
      let ds = res.data;
      console.log(res.data);
      if (ds.depCascader) {
        ds.depCascader = ds.depCascader + "," + ds.deptId;
        ds.depCascader = ds.depCascader.split(",").map(val => parseInt(val));
      } else {
        ds.depCascader = [];
      }

      if (ds.status == 1) this.switchVal = true;
      else this.switchVal = false;

      this.$nextTick(() => {
        this.modalForm = JSON.parse(JSON.stringify(ds));
      });
    },
    async getDeptCascList() {
      let res = await getDeptCascader({ id: 0 });
      this.deptCasc = res.data;
    },
    cancel() {
      this.$emit("listenModalForm");
    },
    saveForm(name) {
      this.$refs[name].validate(async valid => {
        if (valid) {
          this.modalForm_loading = true;

          if (this.switchVal == true) {
            this.modalForm.status = 1;
          } else {
            this.modalForm.status = 0;
          }
          let params = JSON.parse(JSON.stringify(this.modalForm));
          let arr = this.modalForm.depCascader;
          params.depCascader = arr.join(",");
          params.deptId = arr[arr.length - 1];

          try {
            let result;
            if (params.userId) {
              result = await updateUser(params);
            } else {
              result = await saveUser(params);
            }

            if (result.code == "0") {
              this.$Message.success("提交成功!");
              this.$emit("listenModalForm");
              this.$emit("refreshTableList");
            } else {
              this.$Message.error(result.msg);
            }
          } catch (e) {
            this.$Message.error("服务器异常，稍后再试");
          }
          this.modalForm_loading = false;
        } else {
          this.$Message.error("表单验证失败!");
        }
      });
    }
  }
};
</script>
